      
<template>
  <div class="min-h serveProject bg-wt">
  
<SearchForm 
:searchData="pagination"
@handleClear="handleClear"
@handleReset="handleReset"
@handleSearch="handleSearch"
></SearchForm>

<TableList
:data="data"
:total="total"
:pagination="pagination"
@onPageChange="onPageChange"
@handleBulid="handleBulid"
></TableList>

<DialogForm 
    ref="formRef"
    :visible="visible"
    :title="title"
    @handleClose="handleClose"
    @handleAdd="handleAdd"
    >
  </DialogForm>
  </div>



</template>

<script lang="tsx" setup>
import { ref, onMounted } from 'vue';
import { TableProps,PaginationProps } from 'tdesign-vue-next';
import { getProjectList,projectAdd } from '@/api/serve';
import TableList  from './components/TableList.vue'
import SearchForm  from './components/SearchForm.vue'

import { number } from 'echarts';
onMounted(() => {
  console.log("页面挂载了，开始加载数据")

  getList()
});




// 定义表格的数据
const data = ref([]) //当前页的数据
const total = ref(0) //总调目

const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total:0,
}) //总调目


//获取列表数据
const getList = async () => {
  //后台已经写好按条件查询的逻辑，需要传入pageNum和pageSize
  const res = await getProjectList(pagination.value)
  console.log("返回结果：", res)
  data.value = res.data.records
  pagination.value.total = res.data.total
}




// 分页函数，是子组件要要调用的
const onPageChange: PaginationProps['onChange'] = (pageInfo) => {
  console.log('onChange:',pageInfo);
  pagination.value.pageNum=pageInfo.current
  pagination.value.pageSize=pageInfo.pageSize
  // 当每页数量或者当前页发生变化的时候，重新请求数据
  getList()

};

//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageNum: 1,
    pageSize: 10,
    total:0
  }
  getList()
}

//搜索
const handleSearch = () => {
  //点击了搜索按钮之后，就需要重置页码，可能搜索后的数据不足第二页
  pagination.value.pageNum = 1
  getList()
}

//清空
const handleClear = (val) => {
  if(val === 'name'){
    // 清空名字
    delete pagination.value.name
  }else{
    // 清空状态，status==null  后台接到后，sql拼接就不会拼接status
    // 那么 就会将禁用和启用全部查出来
    delete pagination.value.status
  }
  getList()
}



import DialogForm from './components/DialogForm.vue'
//是否显示弹窗
var visible = ref(false)
//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () =>{
  visible.value = true;
  title.value="新增"
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () =>{
  visible.value = false;
  console.log("子组件点击了关闭")
}



const formRef = ref(null)
const title = ref('') // 弹窗标题
import { MessagePlugin } from 'tdesign-vue-next'
// 添加
const handleAdd = async (val) => {
  console.log("父组件 发起保存请求")
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}

</script>

    